<template>
  <div class="cc_box">
    <div class="cc_update"><el-button type="primary" class="cc_btn1" @click="showF()">添加课程资料</el-button></div>
    <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="250"
          border
          >
          <el-table-column
            fixed
            prop="cs_id"
            label="课程资料编号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="cs_name"
            label="课程资料名"
            width="200">
          </el-table-column>
          <el-table-column
            prop="c_name"
            label="课程名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="c_id"
            label="课程编号"
            width="200">
          </el-table-column>
          <el-table-column
            prop="teacher_name"
            label="授课老师"
            width="150">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small">
                查看
              </el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small">
                移除
              </el-button>
            </template>
          </el-table-column>
         </el-table>
         </div>
    <div class="cc_form" v-if="showForm">
        <el-form ref="form" :model="form" label-width="80px">
           <el-form-item label="上传资料">
             <input type="file" @change="fileUpload" id="fileUpload" multiple accept=".gif,.png,.jpg,.jpeg,.mp4">
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">立即创建</el-button>
             <el-button @click="cancelF()">取消</el-button>
           </el-form-item>
        </el-form>
    </div>
   </div>
</template>

<script>
export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      onSubmit() {
        console.log(this.fileList);
        this.showForm = false
      },
      showF(){
        this.showForm = true
      },
      cancelF(){
        this.showForm = false
      },
      fileUpload: function (e) {  
        for (const file of e.target.files) {
              this.fileList.push(file)
        }
      }
    },
    data() {
      return {
        tableData: [{
          cs_id: '123',
          cs_name: '王小虎',
          c_name: 'Java',
          c_id: '12',
          teacher_name: '李四',
        }, ],
        form: {
          cs_id:'',
          cs_name: '',
          c_name:'',
          c_id:'',
          teacher_name:'',
        },
        showForm : false,
        fileList:[],
      }
    },

}
</script>

<style lang="scss" scoped>
  .cc_box{
    width: 100%;
    min-height: 500px;
    background-color: #f6f6f4;
    position: relative;
    .cc_update{
       position: relative;
       width: 100%;
       height: 80px;
       .cc_btn1{
        position: absolute;
        top: 10px;
        right: 20px;
       } 
    }
    .table{
       padding:10px;
    }
    .cc_form{
       position: absolute; 
       width: 50%;
       min-height: 350px;
       padding: 40px;
       box-sizing: border-box;
       background-color: white;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       z-index: 100;
       border-radius: 10px;
    }
  }
</style>